<template>
  <div class="sku-form-container">
    <el-form ref="form" :model="skuForm" label-width="80px">
      <el-form-item label="SPU名称">
        {{ spuName }}
      </el-form-item>
      <el-form-item label="SKU名称">
        <el-input v-model="skuForm.skuName" placeholder="sku名称" />
      </el-form-item>
      <el-form-item label="价格(元)">
        <el-input
          v-model="skuForm.price"
          placeholder="价格(元)"
          type="number"
        />
      </el-form-item>
      <el-form-item label="重量">
        <el-input v-model="skuForm.weight" placeholder="重量(千克)" />
      </el-form-item>
      <el-form-item label="规格描述">
        <el-input
          v-model="skuForm.skuDesc"
          type="textarea"
          placeholder="规格描述"
        />
      </el-form-item>
      <el-form-item label="平台属性">
        <el-form inline label-width="100px">
          <el-form-item
            v-for="(item1, index) in attrList"
            :key="index"
            :label="item1.attrName"
          >
            <el-select v-model="item1.value" placeholder="请选择">
              <el-option
                v-for="(item2, index) in item1.attrValueList"
                :key="index"
                :label="item2.valueName"
                :value="`${item1.id}:${item2.id}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-form inline label-width="100px">
          <el-form-item
            v-for="(item1, index) in baseSaleList"
            :key="index"
            :label="item1.saleAttrName"
          >
            <el-select v-model="item1.value" placeholder="请选择">
              <el-option
                v-for="(item2, index) in item1.spuSaleAttrValueList"
                :key="index"
                :label="item2.saleAttrValueName"
                :value="`${item2.id}:${item2.spuId}`"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表">
        <el-table
          style="width: 100%"
          :data="imageList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" label="label" width="width" />
          <el-table-column align="center" label="图片">
            <template slot-scope="{ row }">
              <el-image
                :src="row.imgUrl"
                alt=""
                :preview-src-list="[row.imgUrl]"
                style="width: 100px; height: 100px; cursor: pointer"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="名称" prop="imgName" />
          <el-table-column align="center" label="操作">
            <template #default="{ row, $index }">
              <el-button
                v-if="row.isDefault === 0"
                type="primary"
                size="small"
                @click="setDefault(row, $index)"
                >设为默认</el-button
              >
              <el-tag v-else type="success" disable-transitions>默认</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button @click="$emit('cancel')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getItem, removeItem } from "utils/storage";
export default {
  name: "SkuForm",
  components: {},
  props: {},
  data() {
    return {
      selectImgList: [],
      skuForm: {
        category3Id: "",
        spuId: "",
        price: "",
        skuDefaultImg: "",
        skuAttrValueList: [
          // {
          //   attrId: 0,
          //   id: 0,
          // }
        ],
        skuDesc: "",
        skuImageList: [
          {
            id: 0,
            imgName: "",
            imgUrl: "",
            isDefault: "",
            skuId: 0,
            spuImgId: 0,
          },
        ],
        skuName: "",
        skuSaleAttrValueList: [
          // {
          //   id: 0,
          //   spuId: 0
          // }
        ],
        tmId: 0,
        weight: "",
      },
      imageList: [],
      baseSaleList: [],
      attrList: [],
    };
  },
  inject: {
    spuManage: {
      type: Object,
    },
  },
  computed: {
    spuName() {
      return getItem("spuRow").spuName;
    },
  },
  watch: {},
  created() {
    this.getPageData();
  },
  mounted() {},
  beforeDestroy() {
    removeItem("spuRow");
  },
  methods: {
    async getPageData() {
      const [{ data: imgaeRes }, { data: saleRes }, { data: attrRes }] =
        await Promise.all([
          this.$api.sku.getImageList(this.spuManage.skuId),
          this.$api.sku.getBaseSaleAttrList(this.spuManage.skuId),
          this.$api.sku.getSkuAttrList(this.spuManage.categoryIds),
        ]);
      this.handleRes(imgaeRes, saleRes, attrRes);
    },
    handleRes(imgaeRes, saleRes, attrRes) {
      attrRes.forEach((val) => {
        val.value = "";
      });
      saleRes.forEach((val) => {
        val.value = "";
      });
      imgaeRes.forEach((val) => {
        val.isDefault = 0;
      });
      this.imageList = imgaeRes;
      this.baseSaleList = saleRes;
      this.attrList = attrRes;
    },
    setDefault(row) {
      this.skuForm.skuDefaultImg = row.imgUrl;
      this.imageList.forEach((val) => {
        val.isDefault = 0;
      });
      row.isDefault = 1;
    },
    handleSelectionChange(val) {
      this.selectImgList = val;
    },
    async onSave() {
      const row = getItem("spuRow");
      this.skuForm.category3Id = row.category3Id;
      this.skuForm.spuId = row.id;
      this.skuForm.tmId = row.tmId;
      this.skuForm.skuAttrValueList = this.attrList.reduce((acc, val) => {
        if (val.value) {
          const [attrId, valueId] = val.value.split(":");
          acc.push({
            attrId,
            valueId,
          });
        }
        return acc;
      }, []);
      this.skuForm.skuSaleAttrValueList = this.baseSaleList.reduce(
        (acc, val) => {
          if (val.value) {
            const [saleAttrId, saleAttrValueId] = val.value.split(":");
            acc.push({
              saleAttrId,
              saleAttrValueId,
            });
          }
          return acc;
        },
        []
      );
      this.skuForm.skuImageList = this.selectImgList.map((val) => {
        return {
          imgName: val.imgName,
          imgUrl: val.imgUrl,
          isDefault: val.isDefault,
          spuImgId: val.id,
        };
      });
      this.skuForm.weight = this.skuForm.weight;
      const res = await this.$api.sku.addSku(this.skuForm);
      if (res.code === 200) {
        this.$message.success("添加成功");
        this.$emit("cancel");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.sku-form-container {
}
</style>
